<template>
    <div class="app-container">

        <!-- 查询条件 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" style="margin-bottom: 10px;">
            <el-form-item label="商品编码" prop="itemCode">
                <el-input
                    v-model="queryParams.itemCode"
                    placeholder="请输入商品编码"
                    clearable
                    style="width: 180px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="商品名称" prop="itemName">
                <el-input
                    v-model="queryParams.itemName"
                    placeholder="请输入商品名称"
                    clearable
                    style="width: 180px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="规格信息" prop="specification">
                <el-input
                    v-model="queryParams.specification"
                    placeholder="请输入规格信息"
                    clearable
                    style="width: 180px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格数据展示 -->
        <vxe-table
            border
            stripe
            ref="tableRef"
            size="small"
            header-align="center"
            :row-config="rowConfig"
            :column-config="columnConfig"
            :data="itemList"
            @radio-change="radioChangeEvent"
            @cell-click="cellClickEvent"
        >
            <vxe-column type="radio" width="40" fixed="center"></vxe-column>
            <vxe-column field="itemCode" show-overflow="title" align="center" title="商品编码" />
            <vxe-column field="itemName" show-overflow="title" align="center" title="商品名称" />
            <vxe-column field="specification" show-overflow="title" align="center" title="规格信息" />
            <vxe-column field="imageUrl" show-overflow="title" align="center" title="图片">
                <template #default="{ row }">
                    <img v-if="row.imageUrl" :src="row.imageUrl" style="width:40px;height:40px;object-fit:contain;" />
                </template>
            </vxe-column>
        </vxe-table>
        
        <!-- 分页信息 -->
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />


            <div style="margin-top: 16px; text-align: right;">
                <el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
            </div>
        </div>
    </template>
  
  <script>
import { listMdItem } from "@/api/mes/md/mdItem";

export default {
    name: "SelectGoods",
    data() {
        return {
            loading: true,
            total: 0,
            itemList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                itemCode: undefined,
                itemName: undefined,
                specification: undefined,
            },
            columnConfig: {
                resizable: true,
                align: 'center',
                headerAlign: 'center',
            },
            rowConfig: {
                keyField: 'id',
                isHover: true,
                isCurrent: true,
            },
            selectedRow: null,
        };
    },
    methods: {
            handleConfirm() {
                if (!this.selectedRow) {
                    this.$message.warning('请选择一条商品');
                    return;
                }
                const item = this.selectedRow;
                const goods = [{
                    productCode: item.itemCode,
                    productName: item.itemName,
                    productId: item.itemId,
                    imageUrl: item.imageUrl || '',
                    specification: item.specification || '',
                }];
                this.$emit('selected', goods);
            },
            radioChangeEvent({ row }) {
                this.selectedRow = row;
            },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.queryParams.itemCode = undefined;
            this.queryParams.itemName = undefined;
            this.queryParams.specification = undefined;
            this.handleQuery();
        },
        getList() {
            this.loading = true;
            listMdItem(this.queryParams).then(response => {
                this.itemList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        checkboxChangeEvent() {},
        checkboxAll() {},
        cellClickEvent() {},
    },
    created() {
        this.getList();
    },
};
  </script>
  
  <style scoped>
  ::v-deep .el-scrollbar__wrap {
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
  }
  </style>